<template>
  <div>
    <el-upload
      :header="myHeaders"
      :file-list="fileList"
      :action="GLOBAL.uploadFile"
      :on-success="handleSuccess"
      :on-change="handleChange"
      :on-remove="handleRemove"
      :show-file-list="false"
      :class="uploadCls"
    >
      <slot><el-button size="small" type="primary">点击上传</el-button></slot>
    </el-upload>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'

const EVENT_REMOVE = 'remove'
const EVENT_SUCCESS = 'success'
const EVENT_CHANGE = 'change'

export default {
  name: 'Upload',
  props: {
    fileList: {
      type: Array,
      default() {
        return []
      }
    },
    isCls: {
      type: Number,
      default: null
    },
    index: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      myHeaders: { authorization: getToken() }
    }
  },
  computed: {
    uploadCls() {
      return `upload-demo${this.isCls}`
    }
  },
  methods: {
    handleRemove(file, fileList) {
      this.$emit(EVENT_REMOVE, fileList, this.index)
    },
    handleSuccess(res, file) {
      this.$emit(EVENT_SUCCESS, file, this.index)
    },
    handleChange(file, fileList) {
      this.$emit(EVENT_CHANGE, fileList)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
